<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/include.jsp" %>
<%@ include file="/WEB-INF/jsp/header.jsp" %>

<script>
	function format() {
		list = $("input");
		for(var j = 0; j < list.length; j++) {
		  	if (list[j].type == "datetime-local" && list[j].value.indexOf("-") > 4)
		  			list[j].value = list[j].value.slice(0, 4) + list[j].value.slice(list[j].value.indexOf("-"));
		}
	}
	function check() {
		 var list = $("select");
		 var b = true;
		 for(var j = 0; j < list.length; j++) {
		 	if(list[j].value == -1) {
			  	list[j].style.color="red";
				for(var i = 0; i < list[j].options.length; i++)
					list[j].options[i].style.color="black";
				b = false;
		 	}
		 	else
		 		list[j].style.color="black";
		}
		list = $("input");
		var j = 0;
		while (j < list.length) {
		  	if (list[j].type != "datetime-local")
		  		list.splice(j, 1);
		  	else {
		 		list[j].style.borderColor="green";
		  		if (list[j].value.indexOf("-") > 4)
		  			list[j].value = list[j].value.slice(0, 4) + list[j].value.slice(list[j].value.indexOf("-"));
		  		j++;
		  	}
		}
		if (list.length >= 2) {
			for(var j = 0; j < list.length; j++) {
				if(list[j].value == "") {
				  	list[j].style.borderColor="red";
					b = false;
			 	}
			 	else {
				 	if (j < list.length - 1 && list[j + 1].value != "" && list[j].value > list[j+1].value) {
					  	list[j].style.borderColor="red";
					  	list[j + 1].style.borderColor="red";
						b = false;
			 		}
				}
			}
		}
		return b;
	}
</script>
<title>Добавление рейса</title>
<a href="trips">
	<div class="mybutton">
		К рейсам
	</div>
</a>
<br><br><br>
<form id="addForm" action="trip_add" method="post" onsubmit="return check()">
	<input name="number" type="number" placeholder="Номер"
		data-validation="required, number" data-validation-allowing="range[1;1024]"/>
	<input name="seats" type="number" placeholder="Количество мест"
		data-validation="required, number" data-validation-allowing="range[0;127]"/>
	<select name="cid">
		<option value="-1">Выберите компанию</option>
		<c:forEach items="${comps}" var="comp" varStatus="i">
				<option value="${comp.id}">${comp.name}</option>
		</c:forEach>
	</select>
	<select id="selectRoute" name="rnumber">
		<option value="-1">Выберите маршрут</option>
		<c:forEach items="${routes}" var="route" varStatus="i">
				<option value="${i.index}">${route.number}</option>
		</c:forEach>
	</select>
	<br>
	<button id="add" class="button" type="submit">Добавить</button>
</form>

<script type="text/javascript">
	var all = [<c:forEach items="${stops}" var="stop" varStatus="i"> 
	   			[<c:forEach items="${stop}" var="st" varStatus="j">
		   				"${st}"
		   				<c:if test="${!j.last}">    
             				,    
           				</c:if>
	   				</c:forEach>]
	   			<c:if test="${!i.last}">    
             		,    
           		</c:if>
			</c:forEach>];
	$('#selectRoute').on('change', function() {
		if (document.getElementById("times") != null)
			document.getElementById("times").remove();
		var select = document.getElementById("selectRoute");
		if (select.value != -1) {
	  		var p = document.createElement("P");
			p.id = "times";
			list = all[select.value];
			for (var index = 0; index < list.length; index++) {
		   		p.innerHTML += list[index];	
				if (index == 0) {
					p.innerHTML += "<br><input name='sec[0]' type='datetime-local' " +
						"data-validation='required' onchange='format()'/><br> "
				}
				if (index == list.length - 1) {
					p.innerHTML += "<br><input name='sec[" + (index * 2 - 1) + "]' type='datetime-local' " +
						"data-validation='required' onchange='format()'/> "
				}
				if (index > 0 && index < list.length - 1) {
					p.innerHTML += "<br><input name='sec[" + (index * 2 - 1) + "]' type='datetime-local' " +
						"data-validation='required' onchange='format()'/> " +
						"<input name='sec[" + index * 2 + "]' type='datetime-local' " +
							"data-validation='required' onchange='format()'/>"
				}
				if (index != 0) {
					p.innerHTML += "<input name='list[" + (index - 1) + "]' type='number' placeholder='Цена' " +
						"data-validation='required, number' data-validation-allowing='range[0;1000000]'/><br> "			
				}
			} 
			var button = document.getElementById("add");
			var form = document.getElementById("addForm");
	 		form.insertBefore(p, button);
	 	}
  	});
</script>
<%@ include file="/WEB-INF/jsp/footer.jsp" %>